<template>
    <div class="sm-spm-lastBtnBox">
        <el-button size="mini" type="primary">删除</el-button>
        <el-button size="mini" type="primary" @click="openSmSpmAdd">新增</el-button>
        <div class="sm-spm-addBox">
            <div class="sm-spm-addBoxClose">
                <div @click="addBoxClose">x</div>
            </div>
            <div class="smSpmAbox-search">
                <!-- 机型 批次 物料编码 -->
                <ul>
                    <li>
                        <span>机型：</span>
                    </li>
                    <li>
                        <el-input
                            ref="saomaInput"
                            size="mini"
                            v-model="productCode"
                            placeholder="请输入内容"
                        ></el-input>
                    </li>
                    <li class="smSpmAbox-leftLi">
                        <span>批次：</span>
                    </li>
                    <li>
                        <el-input
                            ref="saomaInput"
                            size="mini"
                            v-model="batchNo"
                            placeholder="请输入内容"
                        ></el-input>
                    </li>
                    <li class="smSpmAbox-leftLi">
                        <span>物料名称：</span>
                    </li>
                    <li>
                        <el-input
                            ref="saomaInput"
                            size="mini"
                            v-model="materialNum"
                            placeholder="请输入内容"
                        ></el-input>
                    </li>
                    <li class="smSpmAbox-leftLi">
                        <el-button size="mini" type="primary">查询</el-button>
                    </li>
                    <li class="smSpmAbox-leftLi">
                        <el-button size="mini" type="primary" @click="smSpmAboxBc">保存</el-button>
                    </li>
                </ul>
                
            </div>
            <div class="smSpmAbox-table">
                <el-table
                    ref="receiveTable"
                    size="mini"
                    :data="resData"
                    style="width: 100%"
                    height="450"
                    highlight-current-row
                    @selection-change="handleSelectionChange"
                    >
                    <el-table-column type="selection" width="40"> </el-table-column>
                    <el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="productCode" label="机型" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="productCode" label="批次" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="productCode" label="物料编码" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="productCode" label="质量编号" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="qualityCode" label="库房ID" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="productName" label="库位ID" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="itemType" label="库存状态" :show-overflow-tooltip="true" > </el-table-column>
                    <el-table-column prop="itemCode" label="入库日期" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true"> </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                layout="prev, pager, next"
                :total="totalCount"
                :page-size="pageNumber"
                @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { smSpmAboxSearch,smSpmAboxSave } from "@/utils/api.js"
export default {
    name:'',
    data(){
        return{
            isShow:false,
            // searchData:{
            //     productCode:'',
            //     batchNo:'',
            //     materialNum:''
            // },
            productCode:'',
            batchNo:'',
            materialNum:'',
            pageNumber:1,
            pageSize:20,
            resData:[],
            totalCount:0,
            isCheakData:false,
            // 勾选弹窗Table储存信息
            cheakInfo:[]
        }
    },
    methods:{
        // 分页
        handleCurrentChange(){

        },
        // 新增按钮--打开弹窗
        openSmSpmAdd(){
            this.isShow = true
            document.querySelector('.sm-spm-addBox').style.top = '80px'

            console.log(this.productCode)
        },
        // 关闭弹窗
        addBoxClose(){
            document.querySelector('.sm-spm-addBox').style.top = '-800px'
        },
        // 弹窗Table-勾选
        handleSelectionChange(val){
            this.cheakInfo = []
            for(let i=0;i<val.length;i++){
                let qqlist = ''
                let itemCode = val[i].itemCode
                let itemName = val[i].itemName
                qqlist = {'itemCode':itemCode,'itemName':''}
                this.cheakInfo.push(qqlist)
            }
            console.log(val,this.cheakInfo)
        },
        // 弹窗--保存按钮
        smSpmAboxBc(){
            // document.querySelector('.sm-spm-addBox').style.top = '-800px'
            console.log(this.productCode,this.batchNo)
            smSpmAboxSave({
                map:this.cheakInfo
            }).then((res)=>{
                if(res.data.retCode == 200){
                    this.$Alert({
                        title: "成功",
                        message: '保存成功！',
                        type: "success",
                    });
                    console.log('保存成功',res)
                    // 成功后传参给TopTable刷新
                    this.$bus.$emit('smSpmAddSuccess',1)
                }else {
                    this.$Alert({
                        title: "失败",
                        message: '保存失败！',
                        type: "error",
                    });
                    console.log('保存失败',res)
                }
            })
        }
    },
    mounted(){
        // 接收下表勾选后传来的info
        this.$bus.$on('smSpmAboxInfo',(e)=>{
            // console.log(e)
            this.productCode = e.productCode
            this.batchNo = e.batchNo
            this.materialNum = e.materialNum

            smSpmAboxSearch({
                searchParams:{
                    productCode:this.productCode,
                    batchNo:this.batchNo
                },
                pageParameter:{
                    rows:this.pageSize,
                    page:this.pageNumber
                }
            }).then((res)=>{
                console.log('add数据传输',res)
                this.resData = res.data.responseBody.result
                this.totalCount = res.data.responseBody.pageParameter.totalCount;
            })
        })
    }

}
</script>
<style scoped>
.sm-spm-lastBtnBox {
    margin-bottom: 5px;
}
.sm-spm-addBox {
    position: relative;
    width: 84%;
    height: 600px;
    /* background: rgb(231, 231, 231); */
    background: white;
    position: absolute;
    top: -800px;
    left: 14%;
    z-index: 99;
}
.sm-spm-addBoxClose {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
.smSpmAbox-search {
    width: calc(100% - 10px);
    height: 50px;
    /* background: forestgreen; */
    margin-top: 20px;
    margin-left: 5px;
    line-height: 50px;
}
.smSpmAbox-table {
    width: calc(100% - 10px);
    margin-left: 5px;
    text-align: center;
}
.smSpmAbox-search ul li {
    float: left;
}
.smSpmAbox-leftLi {
    margin-left: 8px;
}
</style>
